<template>
	<view>
		<view class="body">
			<view style="border-bottom: 2rpx solid #E0E0E0;">
				<up-row>
					<up-col span="4">
						<view class="text">巡检定位：</view>
					</up-col>
					<up-col span="8" @click="getPosition()"><input placeholder="请点击定位" v-model="position" disabled="true"></up-col>
				</up-row>
			</view>
			<view style="border-bottom: 2rpx solid #E0E0E0; margin-top: 10rpx;">
				<up-row>
					<up-col span="4">
						<view class="text">所属市：</view>
					</up-col>
					<up-col span="8" @click="show1 = true"><input placeholder="请选择所属市" v-model="selectData.com1" disabled="true" /></up-col>
				</up-row>
			</view>
			<view style="border-bottom: 2rpx solid #E0E0E0; margin-top: 10rpx;">
				<up-row>
					<up-col span="4">
						<view class="text">电站名称：</view>
					</up-col>
					<up-col span="8" @click="show2 = true"><input placeholder="请选择所属电站" v-model="selectData.com2" disabled="true" /></up-col>
				</up-row>
			</view>
<!-- 			<view style="border-bottom: 2rpx solid #E0E0E0; margin-top: 10rpx;">
				<up-row>
					<up-col span="4">
						<view class="text">电站名称：</view>
					</up-col>
					<up-col span="8" @click="show3 = true"><input placeholder="请选择所属电站" v-model="selectData.com3" disabled="true" /></up-col>
				</up-row>
			</view> -->
			<view style="border-bottom: 2rpx solid #E0E0E0; margin-top: 10rpx;">
				<up-row>
					<up-col span="4">
						<view class="text">缺陷标志：</view>
					</up-col>
					<up-col span="8" @click="show4 = true"><input placeholder="请选择缺陷标志" v-model="defectMark" disabled="true" /></up-col>
				</up-row>
			</view>
			<view style="border-bottom: 2rpx solid #E0E0E0; margin-top: 10rpx;">
				<up-row>
					<up-col span="4">
						<view class="text">任务状态：</view>
					</up-col>
					<up-col span="8" @click="show5 = true"><input placeholder="请选择任务状态" v-model="missionStatus" disabled="true" /></up-col>
				</up-row>
			</view>
			<view style="border-bottom: 2rpx solid #E0E0E0; margin-top: 10rpx;">
				<up-row>
					<up-col span="4">
						<view class="text">处理类型：</view>
					</up-col>
					<up-col span="8" @click="show6 = true"><input placeholder="请选择处理类型" v-model="processType" disabled="true" /></up-col>
				</up-row>
				<!-- 这里写语音输入相关html -->
			</view>
			<view style="border-bottom: 2rpx solid #E0E0E0; margin-top: 10rpx;">
				<up-row>
					<up-col span="4">
						<view class="text">处理描述：</view>
					</up-col>
					<!-- 文本域字数限制？ -->
					<up-col span="8"><view class="textarea"><u--textarea v-model="processeDescription" ></u--textarea></view></up-col>
				</up-row>
			</view>
			<view style="border-bottom: 2rpx solid #E0E0E0; margin-top: 10rpx;">
				<up-row>
					<up-col span="4">
						<view class="text">现场图片：</view>
					</up-col>
					<up-col span="8"><input placeholder="点击下方+号上传图片" disabled="true" /></up-col>
				</up-row>
			</view>
			<view style="border-bottom: 2rpx solid #E0E0E0; margin-top: 10rpx;padding-left: 100rpx;padding-bottom: 10rpx;">
				<u-upload
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					multiple
					:previewFullImage="true"
					width="250"
					height="150">
						<view style="width: 180rpx;height: 180rpx;border: 2rpx solid #606266;">
							<view style="margin-left: 36rpx;"><u-icon name="plus" size="50" top="18"></u-icon></view>
						</view>
				</u-upload>
			</view>
			<view style="border-bottom: 2rpx solid #E0E0E0; margin-top: 10rpx;">
				<up-row>
					<up-col span="4">
						<view class="text">巡检人：</view>
					</up-col>
					<up-col span="8"><input placeholder="请输入巡检人" v-model="inspectors" /></up-col>
				</up-row>
			</view>
			<view style="margin-top: 20rpx;padding-bottom: 120rpx;">
				<up-row>
					<up-col span="2.5" offset="2.3">
						<u-button type="primary" text="保存" @click="save()"></u-button>
					</up-col>
					<up-col span="2.5" offset="2.5">
						<u-button type="primary" text="退出" @click="exit()"></u-button>
					</up-col>
				</up-row>
			</view>
			
		</view>
		<u-picker :show="show1" :columns="optionData.com1" @confirm="confirm1" @cancel="cancel" @close="cancel" closeOnClickOverlay></u-picker>
		<u-picker :show="show2" :columns="optionData.com2[selectData.com1]" @confirm="confirm2" @cancel="cancel" @close="cancel" closeOnClickOverlay></u-picker>
		<!-- <u-picker :show="show3" :columns="optionData.com3[selectData.com2]" @confirm="confirm3" @cancel="cancel" @close="cancel" closeOnClickOverlay></u-picker> -->
		
		<u-picker :show="show4" :columns="defectMarkData" @confirm="confirm4" @cancel="cancel" @close="cancel" closeOnClickOverlay></u-picker>
		<u-picker :show="show5" :columns="missionStatusData" @confirm="confirm5" @cancel="cancel" @close="cancel" closeOnClickOverlay></u-picker>
		<u-picker :show="show6" :columns="processTypeData" @confirm="confirm6" @cancel="cancel" @close="cancel" closeOnClickOverlay></u-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import { getStationList } from '@/api/report';
	import {parseTime} from "@/utils/ruoyi";
	
	const position = ref('');
	const defectMark = ref('');
	const missionStatus = ref('');
	const processType = ref('');
	const inspectors = ref('济南光伏');
	const fileList1 = ref([]);

	const show1 = ref(false);
	const show2 = ref(false);
	// const show3 = ref(false);
	const show4 = ref(false);
	const show5 = ref(false);
	const show6 = ref(false);

	onMounted(() => {
	  getStation();
	});
	
	//获取当前定位
    function getPosition(){
		console.log("获取定位");
		
	};
	
	//获取电站信息
	function getStation(){
		const date = parseTime(new Date(),"{y}/{m}/{d}+23:59:59");
		const par = {
		  regionType:4,
		  regionId:302,
		  dataType:2,
		  orderName:0,
		  orderType:0,
		  statType:0,
		  stationName:"",
		  dayTime:date,
		  flag:"station",
		  topOrDownType:1,
		  rows:1000,
		  start:0,
		  page:1,
		};
		getStationList(par)
			.then(res => {
				console.log(res);
				// 第一次遍历，将所有城市加入 com1 中
				for (let i = 0; i < res.data.length; i++) {
					// console.log(res.data[i].townName);
				  const townName = res.data[i].townName;
				  if (!optionData.value.com1[0].includes(townName)) {
				    optionData.value.com1[0].push(townName);
				    optionData.value.com2[townName] = [];
				  }
				}
				
				// 第二次遍历，将所有站点加入 com2 中对应的城市选项中
				for (let i = 0; i < res.data.length; i++) {
				  const townName = res.data[i].townName;
				  const name = res.data[i].name;
				  if(!optionData.value.com2[townName][0]){
					 optionData.value.com2[townName][0] = []
				  }
				  optionData.value.com2[townName][0].push(name);
				}
				// 第三次遍历，将所有 com2 中的选项按字母顺序排列
				for (let townName in optionData.value.com2) {
				  optionData.value.com2[townName].sort();
				}
				console.log(optionData.value);
			})
	}
	
	const selectData = reactive({
		com1: "",
		com2: "",
		// com3: "",
	});
	const optionData = ref({
	  com1: [[]],
	  com2: {}
	});
	// const optionData = {
	// 	com1: [
	// 		['控件1A', '控件1B', '控件1C']
	// 	],
	// 	com2: {
	// 		控件1A: [
	// 			["控件2A1", "控件2A2", "控件2A3"]
	// 		],
	// 		控件1B: [
	// 			["控件2B1", "控件2B2"]
	// 		],
	// 		控件1C: [
	// 			["控件2C1", "控件2C2"]
	// 		],
	// 	},
	// com3: {
	// 	控件2A1: [
	// 		['控件3A11', '控件3A12']
	// 	],
	// 	控件2A2: [
	// 		["控件3A21", "控件3A22"]
	// 	],
	// 	控件2A3: [
	// 		["控件3A31", "控件3A32", "控件3A33"]
	// 	],
	// 	控件2B1: [
	// 		["控件3B11", "控件3B12"]
	// 	],
	// 	控件2B2: ["控件3B21"],
	// 	控件2C1: ["控件3C11"],
	// 	控件2C2: [
	// 		["控件3C21", "控件3C22"]
	// 	],
	// },
	// };
	
	
	
	const defectMarkData = [
		['一般警告','电站警告','外网警告','通讯关闭','运维提示']
	];
	const missionStatusData = [
		['已处理','未处理','转警告','警告恢复']
	];
	const processTypeData = [
		['正常','缺陷','清洗','除草','破损','故障','未清洗']
	];
	const confirm1 = (e) => {
		console.log('confirm', e);
		selectData.com1 = e.value[0];
		show1.value = false;
	};
	const confirm2 = (e) => {
		console.log('confirm', e);
		selectData.com2 = e.value[0];
		show2.value = false;
	};
	// const confirm3 = (e) => {
	// 	console.log('confirm', e);
	// 	selectData.com3 = e.value[0];
	// 	show3.value = false;
	// };
	const confirm4 = (e) => {
		defectMark.value = e.value[0];
		show4.value = false;
	};
	const confirm5 = (e) => {
		missionStatus.value = e.value[0];
		show5.value = false;
	};
	const confirm6 = (e) => {
		processType.value = e.value[0];
		show6.value = false;
	};
	function cancel(){
		show1.value = false;
		show2.value = false;
		// show3.value = false;
		show4.value = false;
		show5.value = false;
		show6.value = false;
	};
	// 删除图片
	const deletePic = (event) => {
	  fileList1.value.splice(event.index, 1);
	};
	
	// 新增图片
	const afterRead = async (event) => {
	  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	  let lists = [].concat(event.file);
	  let fileListLen = fileList1.value.length;
	  lists.map((item) => {
	    fileList1.value.push({
	      ...item,
	      status: 'uploading',
	      message: '上传中',
	    });
	  });
	  for (let i = 0; i < lists.length; i++) {
	    const result = await uploadFilePromise(lists[i].url);
	    let item = fileList1.value[fileListLen];
	    fileList1.value.splice(fileListLen, 1, {
	      ...item,
	      status: 'success',
	      message: '',
	      url: result,
	    });
	    fileListLen++;
	  }
	};
	
	const uploadFilePromise = (url) => {
	  return new Promise((resolve, reject) => {
	    let a = uni.uploadFile({
	      url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
	      filePath: url,
	      name: 'file',
	      formData: {
	        user: 'test',
	      },
	      success: (res) => {
	        setTimeout(() => {
	          resolve(res.data.data);
	        }, 1000);
	      },
	    });
	  });
	};
	function save(){
		console.log("保存");
	};
	function exit(){
		console.log("退出");
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F1F1;
	}
	.body {
		margin-top: 20rpx;
	}

	.text {
		padding-bottom: 12rpx;
		padding-left: 30rpx;
	}

	input {
		background-color: white;
		color: black;
		height: 80rpx;
		margin-bottom: 10rpx;
		margin-right: 30rpx;
		border-radius: 10rpx;
		padding-left: 10rpx;
	}
	.textarea{
		margin-bottom: 10rpx;
		margin-right: 30rpx;
		border-radius: 20rpx;
		padding-left: 10rpx;
		margin-left: -10rpx;
	}
</style>